<template>
  <div class="container">
    <div class="m-title">
      <span class="icon"></span>
      修改客户账户信息
    </div>
    <el-form
      ref="editFormRef"
      :model="editNewAccountManagerForm"
      :rules="editNewAccountManagerRules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户名称:" prop="custName">
            <el-input
              v-model="editNewAccountManagerForm.custName"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账户名称:" prop="acctName">
            <el-input v-model="editNewAccountManagerForm.acctName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账户类型:">
            <el-select
              v-model="editNewAccountManagerForm.acctBillingType"
              @change="acctBillingTypeChange"
              class="m-select"
            >
              <el-option
                v-for="item in selectInfo[0].val"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮政编码:">
            <el-input v-model="editNewAccountManagerForm.postCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账单投递方式:">
            <el-select
              v-model="editNewAccountManagerForm.billPostType"
              @change="billPostTypeChange"
              class="m-select"
            >
              <el-option
                v-for="item in selectInfo[1].val"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账单邮递地址:">
            <el-input
              v-model="editNewAccountManagerForm.postAddress"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行名称:">
            <el-input v-model="editNewAccountManagerForm.bankName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行帐号:">
            <el-input
              v-model="editNewAccountManagerForm.paymentAccount"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户描述:">
            <el-input
              type="textarea"
              v-model="editNewAccountManagerForm.accountDesc"
              :autosize="{ minRows: 2, maxRows: 4 }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              type="textarea"
              v-model="editNewAccountManagerForm.remark"
              :autosize="{ minRows: 2, maxRows: 4 }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-c m-btn-box">
      <el-button @click="cancelHandel">返回</el-button>
      <el-button type="primary" @click="saveAdddCustAccountHandel"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import DicCustomerSelect from "@/components/customer/form/DicCustomerSelect";
import CreateNewAccountManager from "@/api/customer/CreateNewAccountManager";
import { mapState } from "vuex";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    DicCustomerSelect,
    DicTable,
    mapState,
  },
  // 这里存放数据
  data() {
    return {
      // 下拉框的取值
      selectInfo: [
        {
          flag: "acct_billing_type", //直管类型
          val: [],
        },
        {
          flag: "bill_post_type", //改名改证件直管类型
          val: [],
        },
      ],

      // 修改账户基本信息-表单对象
      editNewAccountManagerForm: {
        //   账户名称
        acctName: "",
        //   客户名称-保存的时候不需要传递
        custName: "",
        // 客户主键-当选择客户的时候用来存放选择客户的custId
        custId: "",
        // 营销责任地编码
        commonRegionId: "",

        // 账户名称
        acctName: "",
        // 账户类型
        acctBillingType: "",
        // 邮政编码
        postCode: "",
        // 账单投递方式
        billPostType: "",
        // 银行名称
        bankName: "",
        // 银行账号
        paymentAccount: "",
        // 账单邮递地址
        postAddress: "",
        //账户描述
        accountDesc: "",
        // 备注
        remark: "",

        commonregionId: "",
      },
      // 校验规则
      editNewAccountManagerRules: {
        custName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
      },
      accountDetail:{},//初始化存数据
    };
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  mounted() {
    this.$nextTick(function () {
      this.initValue();
      // 修改客户基本信息-初始化服务
      this.initEditparty();
    });
  },
  // 方法集合
  methods: {
    // 直管类型初始化
    async initValue() {
      let response = "";
      this.selectInfo.forEach(async (item, index) => {
        response = await CreateNewAccountManager.initValue({ flag: item.flag });
        if (response.code == 200) {
          this.selectInfo[index].val = response.meta.customers;
        }
      });
      
    },
    // 客户名称初始化服务
    async initEditparty() {
      
      let params = {
        acctId: this.$route.query.acctId,
        scope: "billFormatCustomize,paymentPlan",
        custId: this.$route.query.custId,
      };
      let result = await CreateNewAccountManager.getAccDetail(params);
      if (result.code == 200) {
        let res = result.meta;
        this.accountDetail = res.accountDetail;
        // 客户名称-
        this.editNewAccountManagerForm.custName = this.$route.query.custName;
        // 账户名称
        this.editNewAccountManagerForm.acctName = this.isNull(
          res.accountDetail.acctName
        );
        // 账户类型
        this.editNewAccountManagerForm.acctBillingType = this.isNull(
          res.accountDetail.acctBillingType
        );
        //  邮政编码-
        this.editNewAccountManagerForm.postCode = this.isNull(
          res.accountDetail.billFormatCustomize.postCode
        );
        // 账单投递方式-:
        this.editNewAccountManagerForm.billPostType = this.isNull(
          res.accountDetail.billFormatCustomize.billPostType
        );
        //银行名称-:
        this.editNewAccountManagerForm.bankName = this.isNull(
          res.accountDetail.paymentPlan.bankName
        );
        //银行账户-:
        this.editNewAccountManagerForm.paymentAccount = this.isNull(
          res.accountDetail.paymentPlan.paymentAccount
        );
        //账户描述-:
        this.editNewAccountManagerForm.accountDesc = this.isNull(
          res.accountDetail.accountDesc
        );
        //账单邮递地址-:
        this.editNewAccountManagerForm.postAddress = this.isNull(
          res.accountDetail.billFormatCustomize.postAddress
        );
        //备注
        this.editNewAccountManagerForm.remark = this.isNull(
          res.accountDetail.remark
        );
      }
    },

    isNull(val) {
      if (
        val == "NaN" ||
        val == "null" ||
        val == "undefined" ||
        val == undefined
      ) {
        return (val = "");
      } else {
        return val;
      }
    },
    // 修改账户 取消
    cancelHandel() {
      this.$router.push({
        path: "/custAccountManager",
        query: {
        },
      });
    },
    saveAdddCustAccountHandel() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.saveUpdateAccount();
        } else {
          return false;
        }
      });
    },
    //新建账户-保存
    async saveUpdateAccount() {
      let params = {
        acctName: this.editNewAccountManagerForm.acctName,
        acctId: this.$route.query.acctId,
        acctCd:this.accountDetail.acctCd,
        commonRegionId:this.accountDetail.commonRegionId,
        custId: this.$route.query.custId,
        accountDesc: this.editNewAccountManagerForm.accountDesc, //账户描述
        staffId: this.user.staffId,
        remark: this.editNewAccountManagerForm.remark, //备注
        acctBillingType: this.editNewAccountManagerForm.acctBillingType, //账户类型
        billPostType: this.editNewAccountManagerForm.billPostType, //账单投递方式
        postAddress: this.editNewAccountManagerForm.postAddress, //postAddress	账单邮递地址
        postCode: this.editNewAccountManagerForm.postCode, //邮政编码
        bankName: this.editNewAccountManagerForm.bankName, //银行名称
        paymentAccount: this.editNewAccountManagerForm.paymentAccount, //银行帐号
      };

      let result = await CreateNewAccountManager.updateAccount(params);
      if (result.code == 200) {
        if(result.meta.resultCode == 0){
          this.$confirm("账户信息修改成功", "提示", {
            confirmButtonText: "确定",
            type: "success",
            center: true,
            showCancelButton: false,
          })
            .then(() => {
              this.$router.push({
                path: "/custAccountManager",
              });
            })
            .catch(() => {});
        }else {
          this.$message({
            showClose: true,
            message: result.meta.resultMsg,
            type: 'error'
          });
        }
      }
    },
    // 账户类型-下拉框
    acctBillingTypeChange(val) {
      
    },
    // 账单投递方式
    billPostTypeChange(val) {
      
    },
  },

  // 监控data中的数据变化
  watch: {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {},
  // 生命周期 - 数据挂载之前
  beforeMount() {},
  // 生命周期 - 数据更新之前
  beforeUpdate() {},
  // 生命周期 - 数据更新之后
  updated() {},
  // 生命周期 - 页面销毁之前
  beforeDestroy() {},
  // 生命周期 - 页面销毁完成
  destroyed() {},
};
</script>

<style scoped>
.container {
  padding: 0.2rem;
  background-color: #fff;
}
.m-title {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: rgb(245, 111, 60);
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.m-select {
  width: 100%;
}
.m-btn-box {
  padding: 0.2rem;
  text-align: center;
}
</style>